<template>
  <div class="home">
    <HomeHead />
    <cube-slide :data="items">
      <cube-slide-item v-for="(item, index) in items" :key="index">
        <a :href="item.url">
          <img :src="item.image">
        </a>
      </cube-slide-item>
      <template slot="dots" slot-scope="props">
        <span class="my-dot" :class="{active: props.current === index}" v-for="(item, index) in props.dots" :key="index">{{index + 1}}</span>
      </template>
    </cube-slide>
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
import HomeHead from '@/components/HomeHead.vue'
import webpack from '@/assets/images/webpack.png'

export default {
  name: 'home',
  components: {
    HomeHead
  },
  data() {
    return {
      webpack,
      items: [
        {
          url: '#',
          image: webpack,
        },
        {
          url: '#',
          image: webpack,
        }
      ],
    }
  }
}
</script>

<style lang="stylus" scoped>
  img 
    width 100%
  span 
    width 9px
    height 9px
    background #D8D8D8
    border-radius: 50%
    margin 6px 4.5px

  .active
    background #6DB3EA
</style>
